<template>
  <div class="xorder-confirm-container">
    <Headbar />
    <HeadCartBrand title="确认订单" />
    <div class="yh-layout-box mt-20" v-if="detail">
      <div class="xc-wrap bg-white">
        <h3>协议订单</h3>
        <div class="xc-info">
          <a v-if="judgeFileType(detail.orderProtocolItemDTOList[0].protocolUrl) == 'isDoc'" :href="URL.downWordFileUrl+URL.File+detail.orderProtocolItemDTOList[0].protocolUrl" target='_black' class="xc-pic cursor">
            <img src="@/assets/images/xorder/xc-icon.png">
            <span>点击查看协议</span>
          </a>
          <a v-else-if="judgeFileType(detail.orderProtocolItemDTOList[0].protocolUrl) == 'isImage' || judgeFileType(detail.orderProtocolItemDTOList[0].protocolUrl) == 'isPdf'" class="xc-pic cursor" target="_blank"
           :href="URL.File+detail.orderProtocolItemDTOList[0].protocolUrl">
           <img src="@/assets/images/xorder/xc-icon.png">
           <span>点击查看协议</span>
           </a>
          <div class="xc-main">
            <p>请谨慎阅读协议内容，若需调整则与卖家沟通协商，提交订单后需上传已确认的盖章协议文件或图片，最多支持上传20张图片，大小不超过5M</p>
            <a v-if="judgeFileType(detail.orderProtocolItemDTOList[0].protocolUrl) == 'isDoc'" class="xc-down" :href="URL.File+detail.orderProtocolItemDTOList[0].protocolUrl" target="_blank">下载协议</a>
            <a v-if="judgeFileType(detail.orderProtocolItemDTOList[0].protocolUrl) == 'isPdf'" class="xc-down"
             :href="URL.File+detail.orderProtocolItemDTOList[0].protocolUrl" target="_blank">下载协议</a>
            <a v-if="judgeFileType(detail.orderProtocolItemDTOList[0].protocolUrl) == 'isImage'" target="_blank"
            :href="URL.File+detail.orderProtocolItemDTOList[0].protocolUrl" class="xc-down">下载协议</a>
          </div>
        </div>
        <h3>订单信息</h3>
        <div class="xc-msg">
          <p>
           <span class="xc-label">订单总金额</span> ：<span class="xc-value xc-price">￥{{ detail.amount }}</span>
          </p>
          <p>
           <span class="xc-label">备货时间</span> ：<span class="xc-value">{{ detail.orderProtocolItemDTOList[0].stockupTime }}天</span>
          </p>
          <p>
           <span class="xc-label">付款方式</span> ：<span class="xc-value">{{ detail.orderProtocolItemDTOList[0].paymentMethods == '1'?'全额付款':'分期付款' }}</span>
          </p>
        </div>

        <a class="xc-submit" @click="routeToPath('/member/xorders/detail?orderNo='+detail.orderNo+'&orderStatus='+detail.orderStatus)">
          确定提交
        </a>
      </div>
    </div>
    <Footbars />
  </div>
</template>

<script>
import Headbar from '@/components/Layouts/Headbar'
import HeadCartBrand from '@/components/Layouts/HeadCartBrand'
import Footbars from '@/components/Layouts/Footbars'
import { getXOrderDetail } from '@/api/xorder'
export default {
  name: 'MemberXorderConfirm',
  components: {
    Headbar,
    HeadCartBrand,
    Footbars,
  },
  data() {
    return {
      orderNo: this.getUrlParams('orderNo'),
      detail: null,
    }
  },
  created() {
    this.getXOrderDetail()
  },
  methods: {
    getXOrderDetail() {
      getXOrderDetail({orderNo: this.orderNo}).then(res=>{
        this.detail = res.data;
        console.log(res)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.xorder-confirm-container{

  .xc-wrap{
    padding: 30px;
    border-radius: 10px;
    h3{
      margin-top: 0;
      font-weight: 500;
    }
    .xc-info{
      border: 1px solid #EEEEEE;
      overflow: hidden;
      margin: 0 30px;
      margin-bottom: 30px;
      .xc-pic{
        width: 138px;
        height: 135px;
        float: left;
        text-align: center;
        text-decoration: none;
        background-color: #E9EEF3;
        color: #255B8B;
        img{
          vertical-align: middle;
          margin: 22px 40px 20px 40px;
        }
      }
      .xc-main{
        float: left;
        padding: 26px 25px;
        width: 888px;
        p{
          color: #888888;
        }
        .xc-down{
          border: 1px solid #255B8B;
          color: #255B8B;
          padding: 10px 20px;
          border-radius: 6px;
          display: inline-block;
          text-decoration: none;
          transition: all 0.3s;
          cursor: pointer;
          &:hover{
            background: #255B8B;
            color: #fff;
          }
        }
      }
    }
    .xc-msg{
      background-color: #f7f7f7;
      padding: 30px 40px;
      margin: 0 30px;
      font-size: 16px;
      color: #333;
      .xc-label{
        width: 80px;
        display: inline-block;
        text-align: right;
      }
      .xc-value{
        display: inline-block;
      }
      .xc-price{
        color: #D0021B
      }
    }
    .xc-submit{
      display: block;
      width: 220px;
      line-height: 54px;
      border-radius: 10px;
      background-color: #255B8B;
      color: #fff;
      text-align: center;
      margin: 0 auto;
      font-size: 18px;
      letter-spacing: 1px;
      text-decoration: none;
      margin-top: 30px;
      transition: all .3s;
      &:hover{
        opacity: .8;
      }
    }
  }
}
</style>
